{{template "shared/bootstraptablejs.html"}}

<script>
    var $dataGrid = $('#dataGrid');
    var $searchForm = $("#searchForm");

    //高亮显示id
    var highlightPk = null;

    //初始化加载
    $(function () {
        pageInit();
    });

    //初始化页面
    function pageInit() {
        //从cookie加载查询条件，传入参数为form id
        sdtheme.loadSearchText('searchForm');

        //初始化表格
        dataGridInit();

        //搜索
        $("#btnSearch").on("click", function (e) {
            refreshToFirstPage();
        });

        //清除搜索
        $("#btnClearSearch").on("click", function (e) {
            $('select', $searchForm).selectpicker('val', '');
            $('input', $searchForm).val('');
            refreshToFirstPage();
        });

        //绑定加载成功的事件，成功后高亮显示当前项
        $dataGrid.on('load-success.bs.table', function () {
            if (highlightPk !== null && typeof highlightPk !== 'undefined') {
                sdtheme.highlight($dataGrid.find('tbody tr[data-pk="' + highlightPk + '"]'));
            }
            //高亮显示一次后失效
            highlightPk = null;
        });

        //保持搜索条件面板状态
        sdtheme.searchPanelStatusInit('searchpanelbtn');
    }

    //刷新当前页
    function refresh(pk) {
        $dataGrid.bootstrapTable('refresh');
        highlightPk = pk;
    }

    //刷新并跳转至第一页
    function refreshToFirstPage() {
        //表格刷新时，保存查询条件到cookie
        sdtheme.saveSearchText('searchForm');
        //刷新并跳转至第1页
        $dataGrid.bootstrapTable('refresh', {pageNumber: 1});
        //同时要更新cookie里保存当前页码
        $.cookie('dataGrid.bs.table.pageNumber', 1, {expires: 1});
    }

    //bootstrap table data init
    function dataGridInit() {
        $dataGrid.bootstrapTable({
            url: '{{ urlfor "EquipmentDtuConfigController.DataGrid"}}',
            method: 'post',
            sidePagination: 'server', //服务器端用 server
            idField: 'Id',
            queryParamsType: 'limit',
            queryParams: function (params) {
                //params的自带参数类型由queryParamsType决定
                params.DTU_no = $('.searchForm input[name="DTU_no"]').val();
                params.Room_no = $('.searchForm input[name="Room_no"]').val();
                params.Sim_no = $('.searchForm input[name="Sim_no"]').val();
                params.Used = $('.searchForm select[name="Used"]').selectpicker('val');
                return params;
            },
            pagination: true,
            showRefresh: true,
            showColumns: true,
            toolbar: '#toolbar',
            pageSize: 10,
            pageList: [5, 10, 20, 100, 200],
            paginationShowPageGo: true,    //20170812 lht 扩展select跳转
            paginationUseBSSelect: true,   //20170812 lht 扩展select跳转 启用BoostrapSelect(页面须引用botstrap-select.min.js)
            cookie: true,
            classes: 'table table-bordered table-hover',
            undefinedText: '',
            sortName: 'Id',
            sortOrder: 'asc',
            stickyHeader: true,
            resizable: true,

            rowAttributes: function (row, index) {
                return {'data-pk': row.Id}
            },

            columns: [
                {
                    field: 'state',
                    checkbox: true,
                    radio: false
                }, {
                    field: 'Id',
                    title: '序号',
                    width: '80px',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'DTU_no',
                    title: 'DTU编号',
                    align: 'center',
                    width: '120px',
                    sortable: true
                }, {
                    field: 'Room_no',
                    title: '电房编号',
                    width: '90px',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'Sim_no',
                    title: 'SIM卡号',
                    width: '110px',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'TimeInterval',
                    title: '时间间隔',
                    width: '110px',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'CreateUser',
                    title: '创建人',
                    width: '110px',
                    align: 'center',
                    sortable: true,
                    visible: false
                }, {
                    field: 'CreateDate',
                    title: '创建时间',
                    width: '150px',
                    align: 'center',
                    sortable: true,
                    visible: false,
                    formatter: sdtheme.formatterDateTimeBySpan
                }, {
                    field: 'ChangeUser',
                    title: '修改人',
                    width: '110px',
                    align: 'center',
                    sortable: true,
                    visible: false
                }, {
                    field: 'ChangeDate',
                    title: '修改时间',
                    width: '150px',
                    align: 'center',
                    sortable: true,
                    visible: false,
                    formatter: sdtheme.formatterDateTimeBySpan
                }, {
                    field: 'Used',
                    title: '状态',
                    width: '100px',
                    align: 'center',
                    sortable: true,
                    formatter: sdtheme.showTwoState
                }, {
                    field: 'operate',
                    title: '操作',
                    width: '100px',
                    align: 'center',
                    visible: isVisible(),
                    formatter: formatterOperate
                }],
            onLoadSuccess: function (data) {
                layer.closeAll('loading');
            },
            onSort: function (name, order) {
                //alert('name:' + name + " order:" + order);
            },
            onPageChange: function () {
                //layer.load();
            },
            onCheckAll: function (rows) {
                //禁用删除需要勾选才能用的按钮
                $(".table-btn-check-enable").removeAttr('disabled');
            },
            onCheck: function (rows) {
                //禁用删除需要勾选才能用的按钮
                $(".table-btn-check-enable").removeAttr('disabled');
            },
            onUncheck: function (rows) {
                //禁用删除需要勾选才能用的按钮
                if ($("#dataGrid").bootstrapTable("getSelections").length === 0) {
                    $(".table-btn-check-enable").attr('disabled', 'disabled');
                }
            },
            onUncheckAll: function () {
                //禁用删除需要勾选才能用的按钮
                if ($("#dataGrid").bootstrapTable("getSelections").length === 0) {
                    $(".table-btn-check-enable").attr('disabled', 'disabled');
                }
            },
            onLoadError: function (status) {
                layer.alert('获取数据失败,错误代码：' + status);
            }
        });
    }

    ///用一个带有title值的span将值包裹起来
    function formatterWapBySpan(value, row, index) {
        if (value !== null) {
            return '<span title="' + value + '">' + value + '</span>';
        }
        return "";
    }

    //格式化操作字段中的编辑
    function formatterOperate(value, row, index) {
        var html = [];
        html.push('<div class="btn-group">');
        if ('{{.canEdit}}' === 'true') {
            html.push('<button class="btn btn-primary btn-xs" onclick="EditFun(' + row.Id + ')">' +
                    '<i class="fa fa-pencil"></i> 编辑</button>');
        }
        html.push('</div>');
        return html.join('');
    }

    function isVisible() {
        if ('{{.canEdit}}' === 'true') {
            return true;
        }else{
            return false;
        }
    }

    function EditFun(Id) {
        var title = '添加';
        if (Id > 0) {
            title = "编辑"
        }
        title += "DTU";

        var url = '{{ urlfor "EquipmentDtuConfigController.Edit"}}' + '/' + Id;
        layer.open({
            type: 2,
            title: title,
            shadeClose: false,
            shade: 0.2,
            maxmin: true,
            shift: 1,
            area: ['800px', '400px'],
            content: url,
            btn: ['保存', '关闭'],
            yes: function (index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.FormSubmit();
            }
        });
    }

    function DeleteFun() {
        var url = '{{ urlfor "EquipmentDtuConfigController.Delete"}}';
        var rows = $dataGrid.bootstrapTable("getSelections");
        if (rows.length === 0) {
            layer.alert('请选择想要删除的项', {icon: 0, title: '提示'});
            return;
        }
        var ids = [];
        $(rows).each(function (i, e) {
            ids.push(e.Id);
        });

        layer.confirm('您是否要删除所选的项？', {
            btn: ['是', '否'], icon: 3, title: '请确认'
        }, function () {
            var params = {ids: ids.join(',')};
            $.sdpost(url, params, function (re) {
                if (re.code === 0) {
                    layer.msg(re.msg, {icon: 1, title: '成功'});
                    refresh();
                } else {
                    layer.alert(re.msg, {icon: 2, title: "失败"});
                }
            });
        });
    }
</script>